<template>
    <div class='special'>
        <!--专题头部  -->
        <div class='header'>
         <van-panel title="专题列表" class='title'>
        </van-panel>
        </div>
        <!-- 专题内容 -->
        <div class='content' v-for='item in lists' :key="item.id">
          <div class="demo-image__lazy">
            <el-image :src="item.scene_pic_url"></el-image>
         </div>
          <div class='detail-content'>
            <h4 class="de-title">{{item.title}}</h4>
            <p class="de-activity">{{item.subtitle}}</p>
            <h4 class="de-price">价格{{item.price_info}}元</h4>
          </div>
        </div>  
        
        <!-- 底部tarbar -->
    <tar-btn></tar-btn>
    </div>
</template>

<script>
import tarBtn from '../components/tar-btn.vue'
import axios from 'axios'
import api from '../assets/config/api'
export default {
    name:'cart',
    data(){
      return {
        lists:[]
      }
    },
  components:{
    tarBtn
  },
  async mounted(){
    var res = await axios.get(api.TopicList).then( ({data}) => {
      // console.log(data)
      var res = data.data
      // console.log(res)
      return res;
    })
    console.log(res)
    this.lists = res.data
  }
}
</script>

<style lang="less" scoped>
.special{
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}
.header{
  width: 100%;
  .van-panel__header{
    text-align:center;
    background-color:#ddd;
  }
}
.content{
  position: relative;
}
.detail-content{
  position: absolute;
  bottom: 24px;
  left:50px;
  text-align: center;
  color: #333;
  .de-activity{
    font-size: 14px;
    color:#000;
    margin:10px 0;
  }
  .de-price{
    font-weight: 400;
    font-size: 18px;
    color: red !important;
  }
}




</style>